<template>
  <div @click="avatarClick" class="v-avatar-item" :class="{ disabled }">
    <img :src="value" alt="" />
    <div v-if="showHover" class="v-avatar_hover">
      {{ hovertext }}
    </div>
  </div>
</template>
<script>
import Emitter from "../../assets/emitter";
export default {
  name: "VAvatarItem",
  componentName: "VAvatarItem",
  mixins: [Emitter],
  data() {
    return {};
  },
  props: {
    value: String,
    valueItem: {},
    disabled: Boolean,
    hovertext: String,
    showHoverText: Boolean,
  },
  methods: {
    avatarClick() {
      this.dispatch("VAvatarList", "click", [this.valueItem]);
    },
  },
  computed: {
    showHover() {
      return this.hovertext && this.showHoverText;
    },
  },
};
</script>
<style lang="less" scoped></style>
